<template>
	<view class="page">
		<view class="head">
			<view class="job-user-info">
				<view class="job-user-info-avatar">
					<u-avatar :src="userAvatarUrl" size="95rpx" ></u-avatar>
				</view>
				<view class="job-user-info-name">
					{{ userInfo.Name }}（UID:{{ userInfo.ID }}）
				</view>
			</view>
		</view>
		<view class="body">
			<view class="job-user-enterprise-info" v-if="userInfo.QYName">
				<image src="../../static/job/qy.png" mode="aspectFit" class="job-user-enterprise-info-image"></image>
				<view class="job-user-enterprise-info-name">
					{{ userInfo.QYName }}
				</view>
				<image src="../../static/job/my_15.png" mode="aspectFit" class="job-user-enterprise-info-show"></image>
			</view>
			<u-gap height="5" bgColor="#f5f5f5" v-if="userInfo.QYName"></u-gap>
			<view class="job-user-message">
				<u-grid :border="false" col="4">
					<u-grid-item @click="goToJobUserMessageColumnNavigation(columnListIndex)" v-for="(columnListItem, columnListIndex) in jobUserMessageColumnList" :key="columnListIndex" :customStyle="{width:25+'%'}">
						<view class="job-user-message-item">
							<view class="job-user-message-item-number">
								{{ columnListItem.number }}
							</view>
							<view class="job-user-message-item-text">
								{{ columnListItem.title }}
							</view>
						</view>
					</u-grid-item>
				</u-grid>
				
			</view>
			<u-gap height="5" bgColor="#f5f5f5"></u-gap>
			<view class="job-user-switch">
				<u-tabs
					:list="meSwitchList"
					:duration="0"
					lineWidth="65"
					lineHeight="1"
					lineColor="#c8000a"
					:scrollable="false"
					:itemStyle="{ height: '90rpx', width: '50%', fontsize:'30rpx'}"
					:inactiveStyle="{ color: '#333333',}"
					:activeStyle="{ color: '#c8000a',}"
					@click="switchChange()"
				>
				</u-tabs>
			</view>
			<u-gap height="2" bgColor="#f5f5f5"></u-gap>
			<view class="job-user-jobseekers-group" :style="switchChangeState ? '' : 'display:none;'">
				<view class="job-user-jobseekers-column">
					<u-grid :border="false" col="4">
						<u-grid-item :customStyle="{ marginBottom:30+'rpx', width:25+'%'}" @click="goToJobSeekersColumnNavigation(columnListIndex)" v-for="(columnListItem, columnListIndex) in jobSeekersColumnList" :key="columnListIndex">
							<u-badge :isDot="true" :absolute="true" :offset="[0,25]" :show="columnListItem.isNews" type="warning" bgColor="#c8000a"></u-badge>
							<view style="height: 20rpx;"></view>
							<u--image width="50rpx" height="50rpx" :src="columnListItem.imageUrl"></u--image>
							<text class="job-user-column-text">{{ columnListItem.title }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="job-user-enterprise-group" :style="!switchChangeState ? '' : 'display:none;'">
				<template v-if="setMenuInfo.IsVip != 1">
					<view class="job-user-enterprise-vip" @click="goToBuyVip" v-for="(buyItem, buyIndex) in setMenuInfo.TCList.slice(0)" :key="buyIndex">
						<view class="job-user-enterprise-item">
							<u-icon name="/static/job/my_5.png"></u-icon>
							<view class="job-user-enterprise-item-content">
								{{ buyItem.Title }}
							</view>
							<view class="job-user-enterprise-item-static">
								开通
							</view>
							<u-icon name="arrow-right" color="#e8d4b8"></u-icon>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="job-user-enterprise-vip" @click="goToBuyVip()" v-for="(purchasedItem, purchasedIndex) in setMenuInfo.MYTaoCan" :key="purchasedIndex">
						<view class="job-user-enterprise-item">
							<u-icon name="/static/job/my_5.png"></u-icon>
							<view class="job-user-enterprise-item-content">
								{{ purchasedItem.TCTitle}}
							</view>
							<view class="job-user-enterprise-item-titme">
								（{{ setMenuInfo.Day <= 0 ? '到期请续费' : setMenuInfo.Day + '天后到期' }}）
							</view>
							<view class="job-user-enterprise-item-static">
								续费
							</view>
							<u-icon name="arrow-right" color="#e8d4b8"></u-icon>
						</view>
					</view>
				</template>
				
				<view class="job-user-enterprise-column">
					<u-grid :border="false" col="4">
						<u-grid-item :customStyle="{ marginBottom:30+'rpx', width:25+'%'}" @click="goToCompanyColumnNavigation(columnListIndex)" v-for="(columnListItem, columnListIndex) in jobEnterprisesColumnList" :key="columnListIndex">
							<u-badge :isDot="true" :absolute="true" :offset="[0,25]" :show="columnListItem.isNews" type="warning" bgColor="#c8000a"></u-badge>
							<view style="height: 20rpx;"></view>
							<u--image width="50rpx" height="50rpx" :src="columnListItem.imageUrl"></u--image>
							<text class="job-user-column-text">{{ columnListItem.title }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<u-gap height="5" bgColor="#f5f5f5"></u-gap>
			<view class="job-user-goto-me">
				<view class="job-user-goto-me-text">
					返回同城人个中心
				</view>
			</view>
		</view>
		<view class="bottom">
			
		</view>
		<!-- 自定义底部导航菜单开始 -->
		<JobTabbar :selectIndex="jobTabbarIndex"></JobTabbar>
		<!-- 自定义底部导航菜单结束 -->
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
import JobTabbar from '@/components/JobTabbar/JobTabbar.vue';
	export default {
		data() {
			return {
				jobTabbarIndex: 4, //控制底部导航显示那个栏目激活状态
				switchChangeState: true, // 我是求职者与我是企业绍切换，true时显示招聘职位
				userInfo: {
					Name: '',
					ID: '',
					QYName: '',
				}, // 用户基本信息
				userID: '', // 用户ID
				userAvatarUrl: '', // 用户头像
				userName:'', // 用户名称
				globaUserInfo: {
					
				}, // 用户基本信息
				companyName: '', //公司名称
				setMenuInfo: {}, // 购买套餐及套餐基本信息
				meSwitchList: [
					{
						name: '我是求职者'
					},
					{
						name: '我是企业'
					}
				],
				jobUserMessageColumnList: [
					{
						title: '消息未读',
						number: 3,
						url: '../jobMessage/jobMessage'
					},
					{
						title: '简历信息',
						number: 3,
						url: '../jobMyResume/jobMyResume'
					},
					{
						title: '招聘信息',
						number: 1,
						url: '../jobMyPosition/jobMyPosition'
					},
					{
						title: '职位申请',
						number: 0,
						url: '../jobMyApplication/jobMyApplication'
					}
				],
				jobSeekersColumnList: [
					{
						imageUrl: '/static/job/my_2.png',
						title: '申请记录',
						url: '../jobApplyRecord/jobApplyRecord',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_1.png',
						title: '我的简历',
						url: '../jobMyResume/jobMyResume',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_3.png',
						title: '我的面试',
						url: '../jobMyInterview/jobMyInterview',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_4.png',
						title: '搜藏的职位',
						url: '../jobMyCollectionPosition/jobMyCollectionPosition',
						isNews: false,
					}
				],
				jobEnterprisesColumnList: [
					{
						imageUrl: '/static/job/my_8.png',
						title: '人才库',
						url: '../jobMyTalentPool/jobMyTalentPool',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_7.png',
						title: '我的职位',
						url: '../jobMyPosition/jobMyPosition',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_9.png',
						title: '职位申请',
						url: '../jobMyApplication/jobMyApplication',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_10.png',
						title: '邀请面试记录',
						url: '../jobMyInterviewRecord/jobMyInterviewRecord',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_13.png',
						title: '浏览过的简历',
						url: '../jobBrowsedResume/jobBrowsedResume',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_11.png',
						title: '收藏的简历',
						url: '../jobCollectionResume/jobCollectionResume',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_12.png',
						title: '企业认证',
						url: '../jobMyEnterPriseAuth/jobMyEnterPriseAuth',
						isNews: false,
					},
					{
						imageUrl: '/static/job/my_14.png',
						title: '企业置顶',
						url: '../jobMyEnterpriseTop/jobMyEnterpriseTop',
						isNews: false,
					}
				],
			}
		},
		async onLoad() {
			await this.$onLaunched;
			console.log(uni.getStorageSync('globaUserInfo'))
			this.globaUserInfo = uni.getStorageSync('globaUserInfo')
			
			this.userAvatarUrl = this.globaUserInfo.avatarUrl
			this.getJobMePersonInfo()
			this.getJobMeSetMeal()
		},
		methods: {
			// 获取个人信息
			getJobMePersonInfo() {
				this.$api.getJobMePersonInfo({openid: getApp().globalData.openid}).then(res => {
					console.log(res.data)
					this.userInfo = res.data
					this.jobUserMessageColumnList[0].number = res.data.XXCount
					this.jobUserMessageColumnList[1].number = res.data.JianLiCount
					this.jobUserMessageColumnList[2].number = res.data.ZPXXCount
					this.jobUserMessageColumnList[3].number = res.data.ZWSQCount
					// this.userID = res.data.ID
					// this.userName = res.data.name
					// this.companyName = res.data.QYName
					
				})
			},
			// 获取套餐信息
			getJobMeSetMeal() {
				this.$api.getJobMeSetMeal({openid: getApp().globalData.openid}).then(res => {
					console.log(res.data)
					this.setMenuInfo = res.data
				})
			},
			switchChange(item) {
				if(item.index == 0) {
					this.switchChangeState = true
				} else {
					this.switchChangeState = false
				}
				// this.loadMoreStatus = 'loading'
			},
			goToJobUserMessageColumnNavigation(index) {
				uni.navigateTo({
				    url: this.jobUserMessageColumnList[index].url,
				});
			},
			goToJobSeekersColumnNavigation(index) {
				uni.navigateTo({
				    url: this.jobSeekersColumnList[index].url,
				});
			},
			goToCompanyColumnNavigation(index) {
				uni.navigateTo({
				    url: this.jobEnterprisesColumnList[index].url,
				});
			},
			goToBuyVip() {
				uni.navigateTo({
				    url: '../jobMyBuyVip/jobMyBuyVip',
				});
			},
		},
		components: {
			JobTabbar,
		}
	}
</script>

<style lang="scss" scoped>
@import url('jobMe.css');
</style>
